<template>
  <el-tooltip class="box-item" :effect="theme" :content="content" :disabled="dis" :teleported="false" :show-after="500">
    <div :class="direction ? 'ellipsis' : 'overflow'" :style="{ maxWidth }" ref="evalbox">
      <span ref="evalcontent">{{ content }}</span>
    </div>
  </el-tooltip>
</template>
<script lang='ts' setup>
import { onMounted, ref } from "vue";
interface prop {
  direction?: 'column',
  maxWidth?: string,
  content: string,
  row?: number,
  theme?: 'light' | 'dark'
}

const props = withDefaults(defineProps<prop>(), {
  theme: 'light'
})

const evalbox = ref();
const evalcontent = ref();
const dis = ref(true);
onMounted(() => {
  if (!props.direction && evalcontent.value.offsetWidth > evalbox.value.offsetWidth) {
    dis.value = false;
  }
  if (props.direction === "column" && evalcontent.value.offsetHeight > evalbox.value.offsetHeight) {
    dis.value = false;
  }
});
</script>
<style scoped>
.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: v-bind(row);
  overflow: hidden;
  -webkit-box-orient: vertical;
}
</style>